<script setup>
import { ref } from 'vue';

const isBgc = ref(false);
const props = defineProps(['isBgc']);
isBgc.value = props.isBgc;
</script>

<template>
	<view class="body">
		<view class="grid">
			<view class="loader">
				<view class="ld2" :class="{ ld2bgc: false }">
					<view class="item">
						<view></view>
						<view></view>
						<view></view>
						<view></view>
						<view></view>
						<view></view>
						<view></view>
					</view>
					<view class="text"><slot></slot></view>
				</view>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
view {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

.body {
	.grid {
		position: relative;
		height: 100%;
		width: 100%;
		.loader {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			height: 100%;
			width: 100%;
			.ld2 {
				position: relative;
				z-index: 99;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				width: 300rpx;
				height: 300rpx;
				border-radius: 35rpx;
				.text {
					width: 250rpx;
					font-size: 35rpx;
					color: #fff;
					padding-top: 30rpx;
					white-space: pre-line;
					text-align: center;
				}
			}
			.ld2bgc {
				backdrop-filter: blur(5rpx);
			}
			.item view {
				height: 40rpx;
				width: 8rpx;
				background: #fe4a49;
				margin: 8rpx;
				border-radius: 25rpx;
				float: left;
			}
			.item view:nth-child(1) {
				animation: ld2 1s ease-in-out infinite 0s;
			}
			.item view:nth-child(2) {
				animation: ld2 1s ease-in-out infinite 0.1s;
			}
			.item view:nth-child(3) {
				animation: ld2 1s ease-in-out infinite 0.2s;
			}
			.item view:nth-child(4) {
				animation: ld2 1s ease-in-out infinite 0.3s;
			}
			.item view:nth-child(5) {
				animation: ld2 1s ease-in-out infinite 0.4s;
			}
			.item view:nth-child(6) {
				animation: ld2 1s ease-in-out infinite 0.5s;
			}
			.item view:nth-child(7) {
				animation: ld2 1s ease-in-out infinite 0.6s;
			}

			@keyframes ld2 {
				0% {
					transform: scaleY(1);
					background: #fed766;
				}
				25% {
					background: #009fb7;
				}
				50% {
					transform: scaleY(2);
					background: #59cd90;
				}
				75% {
					background: #fe4a49;
				}
				100% {
					transform: scaleY(1);
					background: #d91e36;
				}
			}
			.loading {
				position: relative;
				font-size: 38rpx;
				color: #fff;
				letter-spacing: 0.05em;
				color: #222;
				color: #22222255;
				&::before {
					content: attr(data-text);
					position: absolute;
					overflow: hidden;
					left: 0rpx;
					top: 0rpx;
					color: #03a9f4;
					overflow: hidden;
					border-bottom: 5rpx solid #03a9f4;
					letter-spacing: 0.05em;
					white-space: nowrap;
					animation: animate 1s ease-in-out infinite;
					animation-delay: 0.05s;
					@keyframes animate {
						0% {
							width: 0;
						}
						100% {
							width: 110%;
						}
					}
				}
			}
		}
	}
}
</style>
